<div class="tab-wrap" style="display: block">
    <#if isUnlocked == false>
	    <div class="lock-tips">
		    <div class="title">
			    Below is a sample report. This feature only available to <em>PLUS</em> version or higher.
			    <br>
			    Please use credit to unlock the report or upgrade your membership.
		    </div>
		    <div class="right">
			    <button class="gd-btn btn-default">Unlock</button>
			    <button class="gd-btn btn-info">Upgrade</button>
		    </div>
	    </div>
	    <#if isMobile == false>
			<img class="demo-img" src="${request.contextPath}/static/img/ins/Overview-Web.png" alt="sample report">
		<#else>
			<img class="demo-img" src="${request.contextPath}/static/img/ins/Overview-Mobile.png"
				 srcset="${request.contextPath}/static/img/ins/Overview-Mobile@2x.png 2x" alt="sample report">
		</#if>
    <#else>
    <#--<div class="wrap-item">
		<div class="wrap-item__title">
			Account Performance Evaluation
			<div class="gd-popover"
				 <#if isMobile == false>
					 content="Account Performance Evaluation is a 1-100 metric, a benchmark that measures the overall performance of influencer in the perspective of follower growth, average ER, quality audience and the ads performance within the same account tier."
				 <#else>
					 data-title="Tips"
					 content="<dl class='modal-tip'>
					<dt>1. Account Performance Evaluation</dt>
					<dd>Account Performance Evaluation is a 1-100 metric, a benchmark that measuresthe overall performance of influencer in the perspective of follower growth,average ER, quality audience and the ads performance within the same account tier.</dd>
					<dt>2. Follower Growth</dt>
					<dd>Compare recent 30-day follower growth rate within same account tier to evaluate.</dd>
					<dt>3. Average ER</dt>
					<dd>Compare recent 30-day engagement rate within same account tier to evaluate.</dd>
					<dt>4. Quality Audience</dt>
					<dd>Compare quality audience rate within same account tier to evaluate.</dd>
					<dt>5. Ads Performance</dt>
					<dd>Compare recent 30-day average engagement rate on ads posts within same account tier to evaluate.</dd>
				</dl>"
				 </#if>
			>
				<i class="iconfont iconfaq"></i>
			</div>
		</div>
		<div class="perform-wrap">
			&lt;#&ndash;<div class="progress-wrap">
				<div class="gd-progress-circle">
					<div class="gd-progress-circle__line gd-progress-circle__r">
						<div class="gd-progress-circle__c gd-progress-circle__rm" style="transform: rotate(135deg);"></div>
					</div>
					<div class="gd-progress-circle__line gd-progress-circle__l">
						<div class="gd-progress-circle__c gd-progress-circle__lm" style="transform: rotate(83.988deg);"></div>
					</div>
					<div class="gd-progress-circle__num">85</div>
				</div>
			</div>&ndash;&gt;
			<div class="perform-list" id="performList">
				<div class="perform-item excellent">
					<i class="iconfont iconlevel1-16px"></i>
					<div class="title">
						Follower Growth
						<#if isMobile == false>
							<div class="gd-popover"
								 content="Compare recent 30-day follower growth rate within same account tier to evaluate.">
								<i class="iconfont iconfaq"></i>
							</div>
						</#if>
					</div>
					<div class="account-state excellent">Excellent</div>
				</div>
				<div class="perform-item moderate">
					<i class="iconfont iconlevel4-16px"></i>
					<div class="title">
						Average ER
						<#if isMobile == false>
							<div class="gd-popover"
								 content="Compare recent 30-day engagement rate within same account tier to evaluate.">
								<i class="iconfont iconfaq"></i>
							</div>
						</#if>
					</div>
					<div class="account-state moderate">Moderate</div>
				</div>
				<div class="perform-item improvable">
					<i class="iconfont iconlevel5-16px"></i>
					<div class="title">
						Quality Audience
						<#if isMobile == false>
							<div class="gd-popover"
								 content="Compare quality audience rate within same account tier to evaluate.">
								<i class="iconfont iconfaq"></i>
							</div>
						</#if>
					</div>
					<div class="account-state improvable">Improvable</div>
				</div>
				<div class="perform-item low">
					<i class="iconfont iconlevel3-16px"></i>
					<div class="title">
						Ads Performance
						<#if isMobile == false>
							<div class="gd-popover"
								 content="Compare recent 30-day average engagement rate on ads posts within same account tier to evaluate.">
								<i class="iconfont iconfaq"></i>
							</div>
						</#if>
					</div>
					<div class="account-state low">Low Competitive</div>
				</div>
			</div>
		</div>
	</div>
	<div class="wrap-item flex-list">
		<div class="flex-item" style="flex: none;">
			<div class="wrap-item__title">
				Audience Interested Industries
				<div class="gd-popover"
					 <#if isMobile == true>
						 data-title="Audience Interested Industries"
					 </#if>
					 content="Top 3 industries that the audience most engaged with (liked or replied their posts) to better understand whether the influencer matches your industry">
					<i class="iconfont iconfaq"></i>
				</div>
			</div>
			<div class="interest-wrap" id="interestList">
&lt;#&ndash;					<div class="interest-item">&ndash;&gt;
&lt;#&ndash;						<div class="circle blue"></div>&ndash;&gt;
&lt;#&ndash;						<div class="label">Fashion</div>&ndash;&gt;
&lt;#&ndash;						<div class="num">67%</div>&ndash;&gt;
&lt;#&ndash;					</div>&ndash;&gt;
&lt;#&ndash;					<div class="interest-item">&ndash;&gt;
&lt;#&ndash;						<div class="circle red"></div>&ndash;&gt;
&lt;#&ndash;						<div class="label">Fashion</div>&ndash;&gt;
&lt;#&ndash;						<div class="num">67%</div>&ndash;&gt;
&lt;#&ndash;					</div>&ndash;&gt;
&lt;#&ndash;					<div class="interest-item">&ndash;&gt;
&lt;#&ndash;						<div class="circle yellow"></div>&ndash;&gt;
&lt;#&ndash;						<div class="label">Fashion</div>&ndash;&gt;
&lt;#&ndash;						<div class="num">67%</div>&ndash;&gt;
&lt;#&ndash;					</div>&ndash;&gt;
			</div>
		</div>
		<div class="flex-item" style="flex: none;">
			<div class="wrap-item__title">
				Audience Interested Business Accounts
				<div class="gd-popover"
					<#if isMobile == true>
						data-title="Audience Interested Business Accounts"
					</#if>
					 content="Top 3 business accounts that the audience most engaged with (liked or replied their posts) to better understand whether the influencer matches your business accounts">
					<i class="iconfont iconfaq"></i>
				</div>
			</div>
			<div class="brand-wrap" id="brandList">
				<div class="brand-item">
					<img class="brand-avatar" src="" alt="1">
					<div class="brand-info">
						<div class="title">Nike</div>
						<div class="sub-title">Cinema & Actor...</div>
					</div>
				</div>
				<div class="brand-item">
					<img class="brand-avatar" src="" alt="2">
					<div class="brand-info">
						<div class="title">Nike</div>
						<div class="sub-title">Cinema & Actor...</div>
					</div>
				</div>
				<div class="brand-item">
					<img class="brand-avatar" src="" alt="3">
					<div class="brand-info">
						<div class="title">Nike</div>
						<div class="sub-title">Cinema & Actor...</div>
					</div>
				</div>
			</div>
		</div>
		<div class="flex-item">
			<div class="wrap-item__title">Audience Demographics</div>
			<div class="audience-wrap" id="audienceList">
				<div class="tag-item">Male</div>
				<div class="tag-item">Age 18-24</div>
				<div class="tag-item">79% Quality Audience</div>
				<div class="tag-item">America</div>
				<div class="tag-item">English</div>
				<div class="tag-item">Caucasion</div>
				<div class="tag-item">Active on Thursday</div>
				<div class="tag-item">Active at 4pm</div>
			</div>
		</div>
	</div>
	<div class="marketing-wrap">
		<div class="marketing-wrap__title">
			<i class="iconfont iconidea16px"></i>
			Marketing Campaign Analytics
		</div>
		<div class="marketing-wrap__inner" id="marketAna">
			<em>${blogger.fullName}</em> is predominated to <em>-</em> business accounts who market at <em>-</em> customer <em>aged -</em> in <em>-</em>. Best posting time is at around <em>-</em> UTC on <em>-</em>.
		</div>
	</div>-->
		<div class="date-tab-wrap" id="overviewDateTab">
			<ul class="ana-tab">
				<li class="ana-tab-item" value="0">7 Days</li>
				<li class="ana-tab-item" value="1">15 Days</li>
				<li class="ana-tab-item is-active" value="2">30 Days</li>
			</ul>
		</div>
		<div class="trend-wrap">
			<div class="title" id="accountTrendTitle">
				Account Trends
                <#--				<div class="label excellent" id="accountTrendLabel">Excellent</div>-->
				<div class="title__right">
					<ul>
						<li class="is-active" onclick="changeTrend(this,0, -1, 0)">Total</li>
						<li onclick="changeTrend(this,0, -1, 1)">Growth</li>
					</ul>
				</div>
			</div>
			<div class="sub-title" id="accountTitle" style="display: none">
				The recent 30-day follower growth rate of <b>${blogger.fullName}</b> is <b>-%</b>, surpassing <b>-%</b> similar accounts of <b>-%</b> on average.
			</div>
			<div class="trend-wrap__inner">
				<ul class="trend-tab">
					<li class="is-active" onclick="changeTrend(this,0,0,-1)">Followers</li>
					<li onclick="changeTrend(this,0,1,-1)">Posts</li>
				</ul>
				<div class="trend-con" id="accountTrend" style="height: 247px;"></div>
			</div>
		</div>
		<div class="trend-wrap">
			<div class="title">
				Recent Post Trends
                <#--				<div class="label moderate" id="postTrendLabel">Moderate</div>-->
			</div>
			<div class="sub-title" id="postTitle">
				<div>
					The recent 30-day average <b><span>ER</span></b> of <b><span>${blogger.fullName}</span></b> is <b><span>-%</span></b>, between <b><span>-%</span></b> and <b><span>-%</span></b>, surpassing <b><span>-%</span></b> similar accounts of <b><span>-%</span></b> on average.
				</div>
				<div style="display: none">
					The recent 30-day average <b><span>ER</span></b> of <b><span>${blogger.fullName}</span></b> is <b><span>-%</span></b>, <b><span>-%</span></b> the highest and <b><span>-%</span></b> the lowest.
				</div>
			</div>
			<div class="trend-wrap__inner">
				<ul class="trend-tab">
					<li class="is-active" onclick="changeTrend(this,1,0,0)">ER</li>
					<li onclick="changeTrend(this,1,0,1)">Likes</li>
					<li onclick="changeTrend(this,1,0,2)">Reviews</li>
				</ul>
				<div class="trend-con" id="postTrend" style="height: 250px;"></div>
			</div>
		</div>
		<div class="trend-wrap">
			<div class="title">
				Posting Time
			</div>
			<div class="sub-title" id="postTimeTitle">
				<div>
					Posts uploaded at <b><span>- (UTC)</span></b> on <b><span>-</span></b> perform the best, with an average ER of <b><span>-%</span></b>.
				</div>
			</div>
			<div class="trend-wrap__inner">
				<div class="trend-con" id="postTimeTrend" style="height: 393px;"></div>
			</div>
		</div>
    </#if>
</div>
<script src="${request.contextPath}/static/plugins/echarts.min.js"></script>
<script src="${request.contextPath}/static/js/dayjs.min.js"></script>
<script src="${request.contextPath}/static/js/nums.js" charset="utf-8"></script>
<script src="${request.contextPath}/static/js/time.js" charset="utf-8"></script>
<script>
    const accountTrendWrap = document.getElementById('accountTrend')
    let accountTrend, postTrend
    const postTrendWrap = document.getElementById('postTrend')

	<#if login == true && isUnlocked == true>
    initOverview()
	</#if>
	
    function initOverview() {
        getUserGoal()
        // getFansOverview()
        getAccountTrend()
        getPostTrend()
	    getPostTimeTrend()
    }

	function getLevel(level) {
	    if(!level) {
	        return false
	    }
	    if(level === 1) {
	        return {
	            className: 'excellent',
		        icon: 'iconlevel1-16px',
		        name: 'Excellent'
	        }
	    } else if(level === 2) {
            return {
                className: 'good',
                icon: 'iconlevel2-16px',
                name: 'Good'
            }
		} else if(level === 3) {
	        return {
	            className: 'moderate',
		        icon: 'iconlevel3-16px',
		        name: 'Moderate'
	        }
	    } else if(level === 4) {
	        return {
	            className: 'improvable',
		        icon: 'iconlevel4-16px',
		        name: 'Improvable'
	        }
	    } else if(level === 5) {
	        return {
	            className: 'low',
		        icon: 'iconlevel5-16px',
		        name: 'Low Competitive'
	        }
	    }
	}
	function getUserGoal() {
        // const e = document.getElementById('performList')
		// e.showLoading()
	    _axios.get('/ins/blogger/userGoal/${blogger.uid?c}').then(res => {
	        if(res.Code === 200) {
	            const followerGrowthLevel = getLevel(res.Data.followerGrowth)
		        const avgErLevel = getLevel(res.Data.avgEr)
		        const realFollowerLevel = getLevel(res.Data.realFollower)
		        const adsPerformanceLevel = getLevel(res.Data.adsPerformance)
		        // const performItem = e.querySelectorAll('.perform-item')

		        /*let itemIcon
		        let accountState
		        if(followerGrowthLevel) {
                    itemIcon = performItem[0].querySelector('.iconfont')
                    accountState = performItem[0].querySelector('.account-state')
                    performItem[0].className = 'perform-item ' + followerGrowthLevel.className
                    itemIcon.className = 'iconfont ' + followerGrowthLevel.icon
                    accountState.className = 'account-state ' + followerGrowthLevel.className
			        accountState.innerText = followerGrowthLevel.name

			        const labelEle = document.getElementById('accountTrendLabel')
                    labelEle.className = 'label ' + followerGrowthLevel.className
                    labelEle.innerText = followerGrowthLevel.name
		        } else {
		            showNoDataImg(performItem)
		        }
		        if(avgErLevel) {
                    itemIcon = performItem[1].querySelector('.iconfont')
                    accountState = performItem[1].querySelector('.account-state')
                    performItem[1].className = 'perform-item ' + avgErLevel.className
                    itemIcon.className = 'iconfont ' + avgErLevel.icon
                    accountState.className = 'account-state ' + avgErLevel.className
                    accountState.innerText = avgErLevel.name

			        const labelEle = document.getElementById('postTrendLabel')
                    labelEle.className = 'label ' + avgErLevel.className
                    labelEle.innerText = avgErLevel.name
		        } else {
                    showNoDataImg(performItem)
		        }
		        if(realFollowerLevel) {
                    itemIcon = performItem[2].querySelector('.iconfont')
                    accountState = performItem[2].querySelector('.account-state')
                    performItem[2].className = 'perform-item ' + realFollowerLevel.className
                    itemIcon.className = 'iconfont ' + realFollowerLevel.icon
                    accountState.className = 'account-state ' + realFollowerLevel.className
                    accountState.innerText = realFollowerLevel.name

			        const labelEle = document.getElementById('qualityAnaLabel')
                    labelEle.className = 'account-state ' + realFollowerLevel.className
                    labelEle.innerText = realFollowerLevel.name
		        } else {
                    showNoDataImg(performItem)
		        }
				if(adsPerformanceLevel) {
                    itemIcon = performItem[3].querySelector('.iconfont')
                    accountState = performItem[3].querySelector('.account-state')
                    performItem[3].className = 'perform-item ' + adsPerformanceLevel.className
                    itemIcon.className = 'iconfont ' + adsPerformanceLevel.icon
                    accountState.className = 'account-state ' + adsPerformanceLevel.className
                    accountState.innerText = adsPerformanceLevel.name

					// ads.ftl内容，渲染可能有延迟
					setTimeout(() => {
                        const labelEle = document.getElementById('adsBaseInfoAnaLabel')
                        if(labelEle) {
                            labelEle.className = 'account-state ' + adsPerformanceLevel.className
                            labelEle.innerText = adsPerformanceLevel.name
                        }
					}, 1000)
				} else {
                    showNoDataImg(performItem)
				}*/
	        }
	        // e.hideLoading()
	    })
	}
	function getFansOverview() {
	    _axios.get('/ins/blogger/fansOverview/${blogger.uid?c}').then(res => {
	        if(res.Code === 200) {
                initTop3Interest(res.Data.category || [])
		        initTop3Brand(res.Data.brand || [])
		        initFansDemo(res.Data.fan || [])
	        }
	    })
	}
	let top1Interest = ''
	function initTop3Interest(data) {
		const e = document.getElementById('interestList')
        if(data.length > 0) {
			let str = ''
            data.forEach((item, i) => {
                str += '<div class="interest-item">'
                switch (i) {
                    case 0:
                        top1Interest = item.categoryName
                        str += '<div class="circle blue"></div>'
                        break
                    case 1:
                        str += '<div class="circle red"></div>'
                        break
                    case 2:
                        str += '<div class="circle yellow"></div>'
                }
                str += '<div class="label">' + item.categoryName + '</div>' +
                    '<div class="num">' + numFormat(+item.categoryRate) + '%</div>' +
                    '</div>'
            })
            e.innerHTML = str
		} else {
		    showNoDataImg(e)
		}

	}
	function initTop3Brand(data) {
	    const e = document.getElementById('brandList')
		if(data.length > 0) {
            let str = ''
            data.forEach(item => {
                str += '<div class="brand-item">' +
                    '<img class="brand-avatar" src="' + item.picUrl + '" alt="' + item.username + '">' +
                    '<div class="brand-info">' +
                    '<div class="title">' + item.username + '</div>'
	            if(item.categoryName) {
	                str +=  '<div class="sub-title">' + item.categoryName + '</div>'
	            } else {
                    str +=  '<div class="sub-title is-white">&nbsp;</div>'
	            }
	            str += '</div>' +
                    '</div>'
            })
            e.innerHTML = str
		} else {
		    showNoDataImg(e)
		}
	}
	function initFansDemo(data){
		const e = document.getElementById('audienceList')
		let str = ''
		if(data.gender) {
			str += '<div class="tag-item">' + data.gender + '</div>'
        }
		if(data.age) {
            str += '<div class="tag-item">Age ' + data.age + '</div>'
		}
		if(data.realFollowerRate) {
            str += '<div class="tag-item">' + data.realFollowerRate + '% Quality Audience</div>'
		}
		if(data.nation) {
		    str += '<div class="tag-item">' + data.nation + '</div>'
		}
		if(data.language) {
		    str += '<div class="tag-item">' + data.language + '</div>'
		}
		if(data.race) {
		    str += '<div class="tag-item">' + data.race + '</div>'
		}
		let activeDay = '-'
		if(data.activeDay || data.activeDay === 0) {
            let dayName = ["Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday", "Sunday"]
			activeDay = dayName[data.activeDay]
            str += '<div class="tag-item">Active on ' + activeDay + '</div>'
		}
        let time = '-'
		if(data.activeHour) {
            if(data.activeHour > 12) {
                time = (data.activeHour - 12) + 'pm'
                str += '<div class="tag-item">Active at ' + time + '</div>'
            } else {
                time = data.activeHour + 'am'
                str += '<div class="tag-item">Active at ' + time + '</div>'
            }
		}
		if(str) {
			e.innerHTML = str
		} else {
			showNoDataImg(e)
		}
		const ana = document.querySelectorAll('#marketAna em')
		ana[1].innerText = top1Interest || '-'
		ana[2].innerText = data.gender || '-'
		ana[3].innerText = 'aged ' + (data.age || '-')
		ana[4].innerText = data.nation || '-'
		ana[5].innerText = time
		ana[6].innerText = activeDay

		const activeHourWrap = document.querySelector('#activeHourWrap .sub-title b')
        activeHourWrap.innerText = time

		const activeDayWrap = document.querySelector('#activeDayWrap .sub-title b')
        activeDayWrap.innerText = activeDay
		const interestWrap = document.querySelector('#interestWrap .sub-title b')
        interestWrap.innerText = top1Interest || '-'

    }
    let accountTrendTab = 0
	let accountType = 0
	let accountTrendData = {}
	let postTrendData = {}
	let postType = 0
    const accountOption = {
        xAxis: {
            type: 'category',
            data: ['05-20','05-21', '05-21', '05-22'],
            boundaryGap: false,
            axisLabel: {
                textStyle: {
                    color: '#8C8C8C'
                }
            },
            axisLine: {
                lineStyle: {
                    color: '#8C8C8C'
                }
            },
            axisTick: {
                show: false
            }
        },
        tooltip: {
            trigger: 'axis',
            formatter: (params) => {
                let accountTrendTabText = ''
                if(accountType === 0) {
                    accountTrendTabText = 'Total'
                } else {
                    accountTrendTabText = 'Growth'
                }
                return dateToFormateDate(params[0].name) + '<br/>' + accountTrendTabText + ': ' + toThousands(+params[0].value)
            }
        },
        grid: {
            top: 16,
            left: 60,
            right: 30,
            bottom: 20,
            borderWidth: 0
        },
        yAxis: {
            type: 'value',
            axisLabel: {
                formatter(val, inx) {
                    return numFormat(val)
                },
	            textStyle: {
                    color: '#8C8C8C'
	            }
            },
            axisLine: {
                show: false
            },
            axisTick: {
                show: false
            },
            splitLine: {
                lineStyle: {
                    type: 'dashed',
                    color: '#D8D8D8'
                }
            }
        },
        series: [{
            data: [400,750,380,800],
            type: 'line',
            showSymbol: false,
            smooth: true,
            symbolSize: 8,
            lineStyle: {
                width: 1
            },
            areaStyle: {
                normal: {
                    opacity: 0.3
                }
            },
            itemStyle: {
                normal: {
                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                        offset: 0,
                        color: '#1890FF'
                    }, {
                        offset: 1,
                        color: '#FFF'
                    }]),
                    lineStyle: {
                        color: '#1890FF' // 改变折线颜色
                    }
                }
            }
        }]
    }
    const postOption = {
        color: ['#1890FF'],
        xAxis: {
            show: false,
            type: 'category',
            data: [1,2,3],
            axisLine: {
                lineStyle: {
                    color: '#D8D8D8'
                }
            },
            axisLabel: {
                textStyle: {
                    color: '#8C8C8C'
                }
            },
            axisTick: {
                show: false
            }
        },
        tooltip: {
            trigger: 'axis',
            axisPointer: {            // 坐标轴指示器，坐标轴触发有效
                type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
            },
            position: function(point, params, dom, rect, size){
                return [0,point[1]];
            },
            formatter: (params) => {
	            const index = params[0].dataIndex
	            const item = postTrendData.mediaInfo[index]
                let str = '<div class="postChartTooltip">' +
	                '<img width="80" height="80" src="' + getImage(item.displayUrl, IMAGE_TYPE.MEDIA, IMAGE_SIZE.SMALL) + '">' +
	                '<div class="right">'
	            if(item.caption) {
                    str += '<div class="title">' + item.caption +'</div>'
	            }
	            str += '<div>' + formatTime(+item.takenTime, 'MM-DD-YYYY') +' UTC</div>'
                if (postType === 0) {
                    str += 'ER'
                } else if (postType === 1) {
                    str += 'Likes'
                } else if (postType === 2) {
                    str += 'Reviews'
                }
                str += ' : ' + numFormat(+params[0].value)
                if(postType === 0) {
                    str += '%'
                }
                str += '</div></div>'
                return str
            }
        },
        grid: {
            top: 16,
            left: 50,
            right: 0,
            bottom: 20,
            borderWidth: 0
        },
        yAxis: {
            type: 'value',
            axisLabel: {
                formatter(val) {
                    return numFormat(val)
                },
                textStyle: {
                    color: '#8C8C8C'
                }
            },
            axisLine: {
                show: false
            },
            axisTick: {
                show: false
            },
            splitLine: {
                lineStyle: {
                    type: 'dashed',
                    color: '#D8D8D8'
                }
            }
        },
        series: [{
            data: [10,30,20],
            type: 'bar',
            lineStyle: {
                width: 1
            },
            areaStyle: {
                normal: {
                    opacity: 0.3
                }
            },
            barWidth: 12,
            itemStyle: {
                barBorderRadius: [4, 4, 0, 0],
                normal: {
                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                        offset: 0,
                        color: '#1890FF'
                    }, {
                        offset: 1,
                        color: '#FFF'
                    }]),
                    lineStyle: {
                        color: '#1890FF' // 改变折线颜色
                    }
                }
            }
        }]
    }

	function getAccountTrend(dayType = 2) {
        let wrap = accountTrendWrap.parentElement
        wrap.showLoading()
	    _axios.get('/ins/blogger/userTrend/${blogger.uid?c}/' + dayType).then(res => {
	        if(res.Code === 200) {
                accountTrendData = res.Data
		        const echartInstance = echarts.getInstanceByDom(accountTrendWrap)
		        if(accountTrendData.dateTime) {
                    accountTrend = echartInstance || echarts.init(accountTrendWrap)
                    accountOption.xAxis.data = accountTrendData.dateTime
                    accountOption.series[0].data = accountTrendData.follower
                    accountTrend.setOption(accountOption)

			        const accountTitle = document.getElementById('accountTrendTitle')
                    accountTitle.querySelector('.title__right .is-active').classList.remove('is-active')
                    accountTitle.querySelector('.title__right li:first-child').classList.add('is-active')

                    accountTitle.parentElement.querySelector('.trend-tab .is-active').classList.remove('is-active')
                    accountTitle.parentElement.querySelector('.trend-tab li:first-child').classList.add('is-active')
		        } else {
		            showNoDataImg(accountTrendWrap, {
                        isECharts: true
                    })
		        }
		        // 模块暂时隐藏
                const accountTitleParams = document.getElementById('accountTitle').querySelectorAll('b')
                accountTitleParams[1].innerText = accountTrendData.growRate + '%'
                accountTitleParams[2].innerText = accountTrendData.exceed + '%'
                accountTitleParams[3].innerText = accountTrendData.sameFollowerSizeGrowRate + '%'
	        }
            wrap.hideLoading()
	    })
	}
	// Recent Post Trends
	function getPostTrend(dayType = 2) {
        const wrap = postTrendWrap.parentElement
        wrap.showLoading()
	    _axios.get('/ins/blogger/mediaTrend/${blogger.uid?c}/' + dayType).then(res => {
	        if(res.Code === 200) {
                postTrendData = res.Data
                const echartInstance = echarts.getInstanceByDom(postTrendWrap)
                if(postTrendData.er) {
                    postTrend = echartInstance || echarts.init(postTrendWrap)
                    postOption.series[0].data = postTrendData.er
                    postOption.xAxis.data = postTrendData.er
                    const postTitleParams = document.querySelector('#postTitle div:first-child').querySelectorAll('b span')
                    postTitleParams[0].innerText = 'ER'
                    postTitleParams[2].innerText = numFormat(+postTrendData.avgEr) + '%'
                    postTitleParams[3].innerText = numFormat(+postTrendData.minEr) + '%'
                    postTitleParams[4].innerText = numFormat(+postTrendData.maxEr) + '%'
                    postTitleParams[5].innerText = numFormat(postTrendData.exceedEr) + '%'
                    postTitleParams[6].innerText = numFormat(postTrendData.sameSizeEr) + '%'
                    postTrend.setOption(postOption)

                    wrap.querySelector('.trend-tab .is-active').classList.remove('is-active')
                    wrap.querySelector('.trend-tab li:first-child').classList.add('is-active')
		        } else {
                    showNoDataImg(postTrendWrap, {
                        isECharts: true
                    })
		        }
            }
            wrap.hideLoading()
	    })
	}
	function getPostTimeTrend(dayType = 2) {
        const postTimeTrend = document.getElementById('postTimeTrend')
		const wrap = postTimeTrend.parentElement
        wrap.showLoading()
        _axios.get('/ins/blogger/mediaTakenTime/${blogger.uid?c}/' + dayType).then(res => {
            if(res.Code === 200) {
                const dayName = ["Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday", "Sunday"]

	            const topInsMediaTakenTime = res.Data.topInsMediaTakenTime

	            const titleSpan = document.querySelectorAll('#postTimeTitle span')
                titleSpan[0].innerHTML =  topInsMediaTakenTime.postHour?(topInsMediaTakenTime.postHour + ':00 (UTC)'): '-'
                titleSpan[1].innerHTML =  topInsMediaTakenTime.postWeek?dayName[topInsMediaTakenTime.postWeek]: '-'
                titleSpan[2].innerHTML =  topInsMediaTakenTime.avgEr?(numFormat(topInsMediaTakenTime.avgEr) + '%'): '-'

	            let timeName = []
	            for (let i =0;i < 24; i++) {
                    timeName.push(i)
	            }
	            const insMediaTakenTime = res.Data.insMediaTakenTime
                let data = []
                timeName.forEach((time, i) => {
                    dayName.forEach((day, j) => {
                        const chartItem = insMediaTakenTime[j][i]
                        if(gugeeGobal.isMobile) {
                            // x: day y: time
                            data.push([j, i, chartItem?scatterDataChange(+chartItem.avgEr).size:0])
                        } else {
                            // x: time y: day
                            data.push([i, j, chartItem?scatterDataChange(+chartItem.avgEr).size:0])
                        }
                    })
                })

                const chart = echarts.init(postTimeTrend)
	            const option = {
                    tooltip: {
                        <#if isMobile == true>
                        position: ['28%', '30%'],
	                    <#else>
                        position: 'top',
                        </#if>
                        backgroundColor:'rgba(9,12,21,0.8)',
                        textStyle: {
                            color: '#FFF',
                        },
                        borderColor: 'rgba(9,12,21,0.8)',
                        formatter: function (params) {
	                        const x = params.data[0]
	                        const y = params.data[1]
	                        <#if isMobile == false>
                            return dayName[y] + ' ' + x + ':00 UTC<br>Post Count:' + insMediaTakenTime[y][x].total +
	                            '<br>Avg ER:' + numFormat(insMediaTakenTime[y][x].avgEr) + '%'
	                        <#else>
                            return dayName[x] + ' ' + y + ':00 UTC<br>Post Count:' + insMediaTakenTime[x][y].total +
                                '<br>Avg ER:' + numFormat(insMediaTakenTime[x][y].avgEr) + '%'
	                        </#if>
                        }
                    },
                    grid: {
                        left: 2,
                        bottom: 10,
	                    <#if isMobile == false>
                        right: 30,
                        top: 20,
	                    <#else>
                        top: 10,
                        right: 20,
	                    </#if>
                        containLabel: true
                    },
                    xAxis: {
                        type: 'category',
	                    <#if isMobile == false>
                        data: timeName,
                        axisLabel: {
                            interval: 1, //间隔显示
                            textStyle: {
                                color: 'rgba(0,0,0,.45)'   //坐标轴字体颜色
                            }
                        },
	                    <#else>
                        data: dayName.map(item => item.substr(0,3)),
	                    </#if>
                        axisTick:{
                            lineStyle: {
                                color: '#EBEEF5'
                            }
                        },
                        boundaryGap: false,
                        splitLine: {
                            show: true,
                            lineStyle:{
                                type:'dashed'
                            }
                        },
                        axisLine: {
                            show: false
                        }
                    },
                    yAxis: {
                        type: 'category',
	                    <#if isMobile == false>
                        data: dayName,
	                    <#else>
                        data: timeName,
	                    </#if>
                        axisTick:{
                            show:false//不显示坐标轴刻度线
                        },
                        axisLabel: {
                            textStyle: {
                                color: 'rgba(0,0,0,.45)'   //坐标轴字体颜色
                            }
                        },
                        splitLine: {
                            show: true,
                            lineStyle:{
                                type:'dashed'
                            }
                        },
                        axisLine: {
                            show: false
                        }
                    },
                    series: [{
                        type: 'scatter',
                        symbolSize: function (val) {
                            return val[2] * 2;
                        },
                        data: data,
                        animationDelay: function (idx) {
                            return idx * 5;
                        },
                        itemStyle: {
                            normal: {
                                color: (params) => {
	                                if(params.value[2] === 0) {
	                                    return ''
	                                }
	                                let er,opacity
	                                if(gugeeGobal.isMobile) {
                                        er = insMediaTakenTime[params.value[0]][params.value[1]].avgEr
                                        opacity = '0.' + scatterDataChange(+er).opacity.toString()
	                                } else {
                                        er = insMediaTakenTime[params.value[1]][params.value[0]].avgEr
                                        opacity = '0.' + scatterDataChange(+er).opacity.toString()
	                                }
                                    const color = 'rgba(24, 144, 255, ' + opacity + ')'
                                    return color
                                }
                            }
                        }
                    }]
	            }
                chart.setOption(option)
            }
            wrap.hideLoading()
        })
	}
	function scatterDataChange(data) {
        if(data <= 1) {
            return {
                size: 10,
	            opacity: 3
            }
        } else if(data > 1 && data <= 2) {
            return {
                size: 12,
	            opacity: 4
            }
        }else if(data > 2 && data <= 3) {
            return {
                size: 14,
	            opacity: 5
            }
        }else if(data > 3 && data <= 4) {
            return {
                size: 16,
	            opacity: 6
            }
        }else if(data > 4 && data <= 5) {
            return {
                size: 18,
	            opacity: 7
            }
        }else if(data > 5 && data <= 6) {
            return {
                size: 20,
	            opacity: 8
            }
        }else if(data > 6) {
            return {
                size: 22,
	            opacity: 9
            }
        }
	}
	function changeTrend(e, trendType, tab, type) {
	    if(!e.classList.contains('is-active')){
	        e.parentElement.querySelector('.is-active').classList.remove('is-active')
		    e.classList.add('is-active')
		    if(trendType === 0) {
                if(type !== -1) {
                    accountType = type
                }
                if(tab !== -1) {
                    accountTrendTab = tab
                }
                if(accountTrendTab === 0 && accountType === 0) {
                    accountOption.series[0].data = accountTrendData.follower
                } else if(accountTrendTab === 0 && accountType === 1) {
                    accountOption.series[0].data = accountTrendData.followerGrow
                } else if(accountTrendTab === 1 && accountType === 0) {
                    accountOption.series[0].data = accountTrendData.post
                } else if(accountTrendTab === 1 && accountType === 1) {
                    accountOption.series[0].data = accountTrendData.postGrow
                }
                accountTrend.setOption(accountOption)
		    } else {
                postType = type
			    const firstPostTitle = document.querySelector('#postTitle div:first-child')
			    const lastPostTitle = document.querySelector('#postTitle div:last-child')
                if(type === 0) {
                    const postTitleParams = firstPostTitle.querySelectorAll('b span')
                    firstPostTitle.show()
                    lastPostTitle.hide()
                    postOption.series[0].data = postTrendData.er
                    postTitleParams[0].innerText = 'ER'
                    postTitleParams[2].innerText = numFormat(+postTrendData.avgEr) + '%'
                    postTitleParams[3].innerText = numFormat(+postTrendData.minEr) + '%'
                    postTitleParams[4].innerText = numFormat(+postTrendData.maxEr) + '%'
                    postTitleParams[5].innerText = numFormat(+postTrendData.exceedEr) + '%'
                    postTitleParams[6].innerText = numFormat(+postTrendData.sameSizeEr) + '%'
				} else if(type === 1) {
                    const postTitleParams = lastPostTitle.querySelectorAll('b span')
                    firstPostTitle.hide()
                    lastPostTitle.show()
                    postOption.series[0].data = postTrendData.like
                    postTitleParams[0].innerText = 'Likes'
                    postTitleParams[2].innerText = numFormat(+postTrendData.avgLike)
                    postTitleParams[3].innerText = numFormat(+postTrendData.maxLike)
                    postTitleParams[4].innerText = numFormat(+postTrendData.minLike)
				} else if(type === 2) {
                    const postTitleParams = lastPostTitle.querySelectorAll('b span')
                    firstPostTitle.hide()
                    lastPostTitle.show()
                    postOption.series[0].data = postTrendData.commentCount
                    postTitleParams[0].innerText = 'Reviews'
                    postTitleParams[2].innerText = numFormat(+postTrendData.avgCommentCount)
                    postTitleParams[3].innerText = numFormat(+postTrendData.maxCommentCount)
                    postTitleParams[4].innerText = numFormat(+postTrendData.minCommentCount)
				}
	            postTrend.setOption(postOption)
		    }
	    }
	}
</script>
<script type="module">
	// overview 时间选择切换
	const overviewTabs = document.querySelectorAll('#overviewDateTab .ana-tab .ana-tab-item')
	overviewTabs.forEach(item => {
	    item.addEventListener('click', () => {
	        if(!item.classList.contains('is-active')) {
                item.parentElement.querySelector('.is-active').classList.remove('is-active')
		        item.classList.add('is-active')

                const dayType = item.getAttribute('value')
                getAccountTrend(dayType)
                getPostTrend(dayType)
                getPostTimeTrend(dayType)
	        }
	    })
	})
</script>